<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #big {
            position: relative;
            height: 200px;
            width: 200px;
            background-color: red;
            margin: 50px auto;
        }
    </style>
</head>
<body>
<div id="big">
</div>
</body>
<script>
    var big = document.getElementById("big");
    function fly(){
        var that = big;
        move(that, {width: 400, height: 400,left:0,top:0}, 10, 20,function(){
            move(that, {left: 200, top: 100}, 10, 50,function(){
                fly();
            });
        });
    }
    fly();
    //        var that = big;
    //        move(that, {width: 100, height: 400}, 10, 20,function(){
    //            move(that, {left: 200, top: 100}, 10, 50);
    //        });
    //    }
    function move(obj, json, speed, time, fn) {
        var timer = obj.timer
        clearInterval(timer);  //清除定时器
        timer = setInterval(function () {
            var flag = true;
            for (var i in json) {  //如何判断所有的属性都执行完了
                var attr = i;
                var value = json[i];
                var currentValue = getStyle(obj, attr);
                if (value > currentValue) {  //目标值比当前值大
                    speed = Math.abs(speed);
                } else {
                    speed = -Math.abs(speed);
                }
                obj.style[attr] = getStyle(obj, attr) + speed + "px";
                if (speed > 0) {
                    if (getStyle(obj, attr) >= value) {
                        obj.style[attr] = value + "px";
                    } else {
                        flag = false;
                    }
                } else {
                    if (getStyle(obj, attr) <= value) {
                        obj.style[attr] = value + "px";
                    } else {
                        flag = false;
                    }
                }
            }
            if (flag){
                clearInterval(timer);
                if (fn) {
                    fn();
                }
            }
        }, time);
//        var attr = json.attr;
//        var value = json.value;
//        var currentValue = getStyle(obj, attr);
//        if (value > currentValue) {  //目标值比当前值大
//            speed = Math.abs(speed);
//        } else {
//            speed = -Math.abs(speed);
//        }
//        timer = setInterval(function () {
//            obj.style[attr] = getStyle(obj, attr) + speed + "px";
//            if (speed > 0) {
//                if (getStyle(obj, attr) >= value) {
//                    obj.style[attr] = value + "px";
//                    clearInterval(timer);
//                    if (fn){
//                        fn();
//                    }
//
//                }
//            } else {
//                if (getStyle(obj, attr) <= value) {
//                    obj.style[attr] = value + "px";
//                    clearInterval(timer);
//                    if (fn){
//                        fn();
//                    }
//                }
//            }
//        }, time)
    }
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return parseInt(obj.currentStyle[attr]);
        } else {
            return parseInt(window.getComputedStyle(obj)[attr]);
        }
    }
</script>
</html>